<template>
    <div class="card" style="margin-bottom: 10px;">
        <div class="cardbody">
            <div class="row">
                <div class=" shop col">我的信息</div>
            </div>
        </div>
    </div>


    <ConTent>

        <div class="card" style="background-color: lightgray;">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        用户名
                    </div>
                    <div class="col">
                        邮箱
                    </div>
                    <div class="col">
                        电话
                    </div>
                    <div class="col">
                        地址
                    </div>


                </div>

            </div>

        </div>



        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        {{ $store.state.username }}
                    </div>
                    <div class="col">
                        {{ $store.state.email }}
                    </div>
                    <div class="col">
                        {{ $store.state.phone }}
                    </div>
                    <div class="col">
                        {{ $store.state.address }}
                    </div>
                </div>
            </div>
        </div>



        <div class="card">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    <div class="col-3">
                        <form @submit.prevent="changeuserinfo">
                            <div class="mb-3">
                                <label for="exampleFormControlInput4" class="form-label">用户名</label>
                                <input v-model="username" type="text" class="form-control" id="exampleFormControlInput4"
                                    placeholder="用户名">
                            </div>
                            <div class="mb-3">
                                <label for="exampleFormControlInput5" class="form-label">密码</label>
                                <input v-model="password" type="password" class="form-control" id="exampleFormControlInput5"
                                    placeholder="密码">
                            </div>
                            <div class="mb-3">
                                <label for="exampleFormControlInput6" class="form-label">邮箱</label>
                                <input v-model="email" type="email" class="form-control" id="exampleFormControlInput6"
                                    placeholder="邮箱">
                            </div>
                            <div class="mb-3">
                                <label for="exampleFormControlInput7" class="form-label">手机号</label>
                                <input v-model="phone" type="text" class="form-control" id="exampleFormControlInput7"
                                    placeholder="手机号">
                            </div>
                            <div class="mb-3">
                                <label for="exampleFormControlInput8" class="form-label">地址</label>
                                <input v-model="address" type="text" class="form-control" id="exampleFormControlInput8"
                                    placeholder="地址">
                            </div>
                            <div style="color:red;">{{ error_message }}</div>
                            <button type="submit" class="btn btn-primary" @click="changeuserinfo">修改</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </ConTent>
</template>

<script>
import { useStore } from 'vuex';
import ConTent from '@/components/ConTent'
import router from '@/router/index';
import { ref } from 'vue';
export default {
    components: {
        ConTent,
    },

    setup() {
        let store = useStore();
        let username = ref("");
        let password = ref("");
        let email = ref("");
        let phone = ref("");
        let address = ref("");
        let error_message = ref("");
        let flag = ref("");
        const changeuserinfo = () => {
            error_message.value = "";
            flag.value = store.state.username === username.value ? 'true' : 'false';
            store.dispatch("changeuserinfo", {
                username: username.value,
                password: password.value,
                email: email.value,
                phone: phone.value,
                address: address.value,
                flag: flag.value,
                success() {
                    router.push({ name: 'home' });
                },
                error(resp) {
                    error_message.value = resp.error_message;
                }
            });
        }
        return { username, password, email, phone, address, changeuserinfo, error_message };
    }
}
</script>

<style scoped>
.shop {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    width: 100%;
}
</style>